<!-- 组织管理 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button
              v-hasPerm="['organization@add']"
              type="success"
              @click="openDialog()"
            >
              <i-ep-plus />新增
            </el-button>
            <el-button
              v-hasPerm="['organization@del']"
              type="danger"
              v-if="removeIds.length > 0"
              @click="handleDelete()"
            >
              <i-ep-delete />删除
            </el-button>
          </div>

          <div>
            <div v-if="isShowSearchBtn" style="display: inline-block">
              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键字" prop="title">
                  <el-input
                    v-model="queryParams.title"
                    placeholder="关键词"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
                <el-form-item label="分类" prop="category_id">
                  <el-select
                    v-model="queryParams.category_id"
                    placeholder="全部"
                    clearable
                    class="!w-[100px]"
                  >
                    <el-option label="高层" :value="1" />
                    <el-option label="中层" :value="2" />
                    <el-option label="基层" :value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="is_hid">
                  <el-select
                    v-model="queryParams.is_hid"
                    placeholder="全部"
                    clearable
                    class="!w-[100px]"
                  >
                    <el-option label="启用" :value="0" />
                    <el-option label="禁用" :value="1" />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="handleQuery">
                    <i-ep-search />搜索
                  </el-button>
                  <el-button @click="resetQuery">
                    <i-ep-refresh />重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-button
              class="ml-3"
              @click="handleSearchShowBtn"
              icon="Search"
              circle
            />
            <el-button
              class="ml-3"
              title="刷新"
              @click="handleQuery"
              icon="Refresh"
              circle
            />
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="pageData"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          key="id"
          label="ID"
          align="center"
          prop="id"
          width="100"
          sortable="custom"
        />
        <el-table-column label="姓名" align="center" prop="nickname" />
        <el-table-column label="手机号" align="center" prop="mobile" />
        <el-table-column label="部门" align="center">
          <template #default="scope">
            <el-tag
              v-for="item in scope.row.organization"
              :key="item.id"
              type="primary"
              effect="plain"
            >
              {{ item.title }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="职位" align="center" prop="position_name" />
        <el-table-column label="角色" align="center">
          <template #default="scope">
            <el-tag
              v-for="item in scope.row.roles"
              :key="item.id"
              type="primary"
              effect="light"
            >
              {{ item.title }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="created_at" />
        <el-table-column label="状态" align="center" prop="is_hid">
          <template #default="scope">
            <el-tag
              effect="dark"
              :type="scope.row.is_hid == 0 ? 'success' : 'danger'"
            >
              {{ scope.row.is_hid == 0 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="created_at"
          width="160"
        />
        <el-table-column label="操作" fixed="right" width="135">
          <template #default="scope">
            <el-button
              v-hasPerm="['organization@edit']"
              type="success"
              circle
              title="编辑"
              @click="openDialog(scope.row.id)"
            >
              <i-ep-edit />
            </el-button>
            <el-button
              v-hasPerm="['organization@del']"
              circle
              type="danger"
              title="删除"
              @click="handleDelete(scope.row.id)"
            >
              <i-ep-delete />
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.p"
        v-model:limit="queryParams.limit"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Roster",
  inheritAttrs: false,
});
import { getRosterPage } from "@/api/roster";
import { RosterQuery, Roster } from "@/api/roster/types";
const queryFormRef = ref(ElForm); // 查询表单
const isShowSearchBtn = ref(false);
const loading = ref(false); //  加载状态
const removeIds = ref([]); // 删除ID集合 用于批量删除
const queryParams = reactive<RosterQuery>({
  p: 1,
  limit: 10,
});
const dateTimeRange = ref([]);
const total = ref(0); // 数据总数
const pageData = ref<Roster[]>(); // 分页数据

watch(dateTimeRange, (newVal) => {
  Object.assign(queryParams, { time: newVal });
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  getRosterPage(queryParams)
    .then(({ data }) => {
      pageData.value = data.items;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  dateTimeRange.value = [];
  queryParams.p = 1;
  handleQuery();
}

/** 行选中 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 删除 */
function handleDelete(id?: number) {
  const ids = id || removeIds.value;
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    delRoster({ ids: ids }).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
}

//收起展开搜索按钮
function handleSearchShowBtn() {
  isShowSearchBtn.value = isShowSearchBtn.value === false;
}

/** 排序 */
function handleSortChange(data: any) {
  const { prop, order } = data;
  if (prop === "id") {
    if (order === "ascending") {
      queryParams.sort = "+id";
    } else {
      queryParams.sort = "-id";
    }
    handleQuery();
  }
}

onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.table-container .el-form-item {
  margin-bottom: 0;
}
</style>
